<template>
  <div class="list">
    <div class="item" :class="{active:item.value==value}" v-for="(item,index) in list" :key="index" @click="toggle(item)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    },
    value: {
      type: [String, Number],
      default: 0
    },
    type: {
      type: [String, Number],
      default: 'add'
    },
  },
  methods: {
    toggle (info) {
      if (this.type == 'add') {
        this.$emit('input', info.value)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.list{
    display: flex;
    height: 63px;
    padding-bottom: 15px;
    margin-top: -5px;
    .item{
        width: 102px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        border: 1px solid #D9D9D9;
        font-size: 14px;
        border-radius: 2px;
        margin-right: 20px;
        cursor: pointer;
    }
    .item.active{
        border:1px solid #5969F6;
        color: #5969F6;
        background: url("../../assets/type-select-active.png") no-repeat right 24px;
        background-size: 24px 24px;
    }
}
</style>
